<template>
  <view class="activity-list">
    <view class="title">参与的课程活动信息</view>
    <view
      class="activity-list-item"
      v-for="(item, index) in activityList"
      :key="index"
      @click="jumpToActivityPhoto(item)"
    >
      <view class="left"
        ><img class="coverImg" :src="item.coverImg" alt=""
      /></view>
      <view class="right">
        <view class="title">{{ item.title }}</view>
        <view :class="item.files ? 'isFinish' : 'noFinish'">{{
          item.files ? "已上传活动照片" : "还未上传活动照片"
        }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "activityList",
  props: {},
  data() {
    return {
      activityList: [
        {
          coverImg:
            "https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png",
          title: "我的梦想画板",
          description: "激发孩子对未来职业的憧憬",
          position: "深圳小学",
          activityStatus: 10,
          time: "2024.04.03", // 10进行中 20未开启 30已结束
          files: ["1", "2", "3"],
        },
        {
          coverImg:
            "https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png",
          title: "我的梦想画板",
          description: "激发孩子对未来职业的憧憬",
          position: "深圳小学",
          activityStatus: 20,
          time: "2024.04.03",
          files: null,
        },
        {
          coverImg:
            "https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png",
          title: "我的梦想画板",
          description: "激发孩子对未来职业的憧憬",
          position: "深圳小学",
          activityStatus: 30,
          time: "2024.04.03",
          files: ["1", "2", "3"],
        },
        {
          coverImg:
            "https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png",
          title: "我的梦想画板",
          description: "激发孩子对未来职业的憧憬",
          position: "深圳小学",
          activityStatus: 10,
          time: "2024.04.03",
          files: ["1", "2", "3"],
        },
        {
          coverImg:
            "https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png",
          title: "我的梦想画板",
          description: "激发孩子对未来职业的憧憬",
          position: "深圳小学",
          activityStatus: 10,
          time: "2024.04.03",
          files: null,
        },
        {
          coverImg:
            "https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png",
          title: "我的梦想画板",
          description: "激发孩子对未来职业的憧憬",
          position: "深圳小学",
          activityStatus: 10,
          time: "2024.04.03",
          files: null,
        },
        {
          coverImg:
            "https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png",
          title: "我的梦想画板",
          description: "激发孩子对未来职业的憧憬",
          position: "深圳小学",
          activityStatus: 10,
          time: "2024.04.03",
          files: null,
        },
        {
          coverImg:
            "https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png",
          title: "我的梦想画板",
          description: "激发孩子对未来职业的憧憬",
          position: "深圳小学",
          activityStatus: 10,
          time: "2024.04.03",
          files: null,
        },
      ],
    };
  },
  methods: {
    jumpToActivityPhoto(item) {
      uni.navigateTo({
        url: `/pagesSub/ztyNew/activityPhoto/index?itemInfo=${encodeURIComponent(
          JSON.stringify(item)
        )}`,
      });
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.activity-list {
  width: calc(100% - 32rpx);
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  .title {
    font-weight: bold;
    font-size: 36rpx;
    color: #222222;
    margin-bottom: 32rpx;
  }
  .activity-list-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: linear-gradient(170deg, #f6fdff 0%, #f6fdff 100%);
    border-radius: 0rpx 16rpx 16rpx 0rpx;
    margin-bottom: 24rpx;
    position: relative;
    .left {
      width: 166rpx;
      border-radius: 18rpx;
      //   box-shadow: 5px 5px 10px rgba(206, 223, 237, 1);
      img {
        border-radius: 18rpx;
        width: 166rpx;
        height: 196rpx;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 28rpx 30rpx;
      flex: 1;
      overflow: hidden;
      .title {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #444444;
        height: 36rpx;
        line-height: 36rpx;
        margin-bottom: 8rpx;
      }
      .isFinish {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #9baebb;
      }
      .noFinish {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #f3806c;
      }
    }
  }
}
</style>
